<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<!-- if mobile -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>无标题文档</title>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
	<script>


	</script>
	<style>
		* {
			box-sizing: border-box;
		}
		
		html,
		body {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		
		body {
			margin: 0;
		}
		
		.container {
			background: #EBECF0;
			width: 100%;
			height: 100%;
			/*			background: #123;*/
		}
		
		.avatar {
			padding: 2rem;
			text-align: center;
		}
		
		.avatar img {
			width: 10rem;
			height: 10rem;
			border-radius: 5rem;
		}
		
		.form {
			position: relative;
			clear: both;
		}
		
		.form input {
			text-align: center;
			border: 1px solid #EBECF0;
			border-width: 1px 0 0 0;
			height: 2rem;
			line-height: 2rem;
			font-size: 1.2rem;
			padding: 0;
			width: 100%;
			display: block;
			float: left;
		}
		
		.form input:first-child {
			border-width: 0;
		}
		
		.submit {
			width: 100%;
			padding: .3rem;
		}
		
		.form button {
			width: 100%;
			background: #01ACED;
			color: #fff;
			font-size: 1rem;
			display: block;
			border: 0px;
			border-radius: .3rem;
			padding: 0.3rem;
		}
		
		.foot {
			position: fixed;
			width: 100%;
			bottom: 0;
			padding: .8rem;
		}
		
		.foot>a {
			text-decoration: none;
		}
		
		.pl {
			float: left;
		}
		
		.pr {
			float: right;
		}
		
		.vertify {
			width: 50% !important;
		}

	</style>
</head>

<body>
	<div class="container">
		<div class="avatar">
			<img src="http://lorempixel.com/200/200/" alt="">
		</div>
		<div class="form">
			<form action="/">
				<input type="text" placeholder="用户名/手机号">
				<input type="password" placeholder="密码">
				<input type="text" placeholder="手机号">
				<input class="vertify" type="text" placeholder="验证码">
				<input class="vertify" type="button" value="获取验证码">
				<input type="password" placeholder="密码">
				<div style="clear:both"></div>
			</form>
			<div class="submit">
				<button type="button">登陆</button>
				<button type="button">注册</button>
			</div>
		</div>
		<div class="foot">
			<a href="#">无法登陆？</a>
			<a class="pr" href="#">注册</a>
		</div>
	</div>
</body>

</html>
